import React, { useEffect, useState } from 'react'
import { Editor } from "react-draft-wysiwyg";
import {  ContentState,  EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";


export const NewsEditor = (props) => {
  const {content}=props;
  // console.log('content1',props.content);
  // console.log('props:',props);
useEffect(()=>{
// console.log('content',props.content);
if(content===undefined) return;
  const contentBlock=htmlToDraft(content);
if(contentBlock){
  const contentState=ContentState.createFromBlockArray(contentBlock.contentBlocks);
  const editorState=EditorState.createWithContent(contentState);
  setEditorState(editorState)
}
  },[content])
  const [editorState,setEditorState]=useState("")
  return (
    <div>
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={(editorState)=>{setEditorState(editorState)}}
        onBlur={()=>{
          props.getContent(draftToHtml(convertToRaw(editorState.getCurrentContent())))
        }}
      />
    </div>
  )
}
